Design principles for this UI review

These principles are the lens for recommendations, aiming for clean, subtle, fresh, and modern fashion ecommerce.

1) Clarity and hierarchy

Make the primary actions and key messages obvious with minimal visual noise.

  • What good looks like: One clear hero message, one primary CTA style, consistent heading hierarchy.
  • Watch outs: Competing banners, mixed button styles, low-contrast text on imagery.

2) Consistency and systemisation

Fewer component styles, more repeatable patterns, tighter spacing and typography rules.

  • What good looks like: Reusable card layouts, standardised padding, predictable icon sizes.
  • Watch outs: Slightly different fonts, radii, shadows, or borders across modules.

3) Premium restraint

Let photography and whitespace carry the brand, keep UI chrome minimal.

  • What good looks like: Muted neutrals, subtle dividers, restrained promotions.
  • Watch outs: Heavy outlines, loud badges, chunky shadows, overly saturated accents.

4) Modern interaction cues

Clear states for hover, focus, selected, disabled, and loading, without gimmicks.

  • What good looks like: Soft transitions, clear active states, accessible focus rings.
  • Watch outs: No selected indication, inconsistent hover treatments, unclear tappable targets.

5) Content and typography polish

Better legibility, calmer rhythm, and more editorial type use where it counts.

  • What good looks like: Balanced line-lengths, consistent casing, deliberate type pairing.
  • Watch outs: Thin type on images, excessive all-caps, inconsistent spacing between modules.

How this report is structured

Each page tab contains “findings”. Each finding has pros, cons, recommended change, and an image slot.

  • Device: Desktop and mobile tags per finding.
  • Images: Upload any screenshot and it previews inline (local only).
  • Next: We will add Global, PLP, PDP, and Mini cart tabs.

Homepage (UAT)

Add findings for homepage UI elements only. Each item should be specific and include desktop or mobile.

Hero typography legibility and CTA refinement

Desktop Mobile
Section
Hero banner headline, subcopy, CTA button
Pros
  • Hero imagery feels editorial and on-brand for fashion.
  • Primary CTA is clear and prominent.
Cons
  • Text legibility varies depending on image brightness and contrast.
  • CTA styling reads slightly generic and could be more boutique.
  • On mobile, headline scale can crowd the composition.
Recommended change
Consider a subtle contrast treatment behind hero text (currently seems stronger on title rather than text). This seems to be a fully designed hero banner (image, text, cta), consider making texts and CTA a part of the code so CTA has the correct treatment with multiple states. As you can see in screenshot at tablet CTA can become blurry as it is a part of the image. CTA style seems to not exist anywhere else on the site
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture hero on desktop and mobile, plus any alternate hero slides.

Category tiles hierarchy and mobile carousel treatment

Desktop Mobile
Section
Category tile modules (Maxi Dresses, Short Dresses, Cocktail Dresses, Gift Shop)
Pros
  • Quick pathways into key categories.
  • Photography communicates use-case well.
Cons
  • Tiles lack excitement. CTA's have no unique styling
  • Mobile carousel images can camouflage arrows.
  • Inconsistent spacing and padding around component
Recommended change
Consider a stronger CTA and clearer pagination/arrow navigation on mobile. Ensure spacing/padding is consistent (currently seems to be 7px above, 14px below, 15 px left and right, 8px gaps between cards). Try using consistent padding and spacing divisible by 4 for better consistency
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture the tile module at first view, and after one horizontal swipe on mobile.

Product grid, card density, and Quick Add pattern

Desktop Mobile
Section
Trending Now module, product cards, Quick Add and size selection
Pros
  • Product imagery is strong and consistent.
  • Quick Add supports faster purchasing.
  • Tag design legible without interrupting product images
Cons
  • Quick Add plus size buttons and color adds visual density, most noticeable on mobile.
Recommended change
Consider a more subtle quick add design CTA, as well as navigation arrows or scrollbar for mobile. Also with most modules on homepage, consider more and consistent padding and breathing room
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture a product card default state and the Quick Add expanded state.

Long-form brand copy block readability and hierarchy

Desktop Mobile
Section
Welcome text block, Read more or Read less control
Pros
  • Brand story and SEO content is present.
  • Helpful for first-time visitors who want context.
Cons
  • Visually heavy for a homepage and lacks ideal styling and formatting.
  • Mobile scroll fatigue increases with dense paragraphs.
  • Read more control can be missed if not styled clearly.
Recommended change
Convert to a editorial module (1 short paragraph plus 3 bullets) with a clear Read more link. Use a two-column layout on desktop, and a card layout on mobile. Tighten typography (line length, spacing, heading hierarchy).
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture the collapsed and expanded states of the Read more section.

Reassurance strip icon system and spacing

Desktop Mobile
Section
Afterpay, Returns, Reviews, Shipping, Loyalty, Student Discount
Pros
  • Strong reassurance coverage at a glance.
  • Icons help users scan the benefits.
Cons
  • Mobile strip is dense and long.
  • Icon stlyling all feel completely different
  • Spacing and alignment can drift between items.
Recommended change
Unify icon style (stroke weight, size, tone) and reduce contrast slightly. Standardise spacing and alignment across all items, and make mobile 2 column to reduce height
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture the reassurance strip on both desktop and mobile, including any hover states.

Global Elements

Global UI review covering navigation and footer patterns across desktop and mobile.

General UI - Global visual styling and hierarchy consistency

Desktop Mobile
Section
Typography hierarchy, color usage, UI styling patterns, CTAs
Pros
  • Clean and minimal visual presentation across the site.
  • Consistent use of components creates a cohesive experience.
  • Black and white palette keeps the UI feeling neutral and premium.
Cons
  • Limited text hierarchy makes headlines, subheadings, and supporting text feel visually similar.
  • CTAs often rely on placement rather than styling to stand out.
  • Minimal use of brand color reduces visual energy and emphasis.
  • Lack of clear typographic scale or style differentiation suggests no defined UI style guide.
  • Important moments such as promotions, section headers, and reassurance messaging lack visual contrast.
Recommended change
Establish a lightweight UI style guide covering typography, spacing, color usage, and component states to improve clarity while maintaining consistency. Define a clear typographic hierarchy for headlines, section titles, body copy, and supporting text. Introduce restrained use of brand color (consider light use of old blue?) to highlight CTAs and key moments without sacrificing the clean aesthetic. Build in hover states, active states, etc and full component library ideally based on atomic design principles.

Image slot: upload your UAT screenshot for this finding.

Tip: name your screenshot consistently (for example: HP-Hero-Mobile.png).

Promo bar and header stack

Desktop Mobile
Section
Promo bar(s), header, navigation row, search row
Pros
  • Strong monochrome base feels clean and fashion-led.
  • Always on search box
  • Clear separation of global controls (nav, account, cart).
Cons
  • Multiple stacked rows and promo messages can feel visually busy, especially on mobile.
  • Competing promos dilute a premium, editorial tone.
  • Header height pushes hero content down, reducing impact.
Recommended change
Monitor use of navigation row post launch, users may ignore it and it just takes up extra space. If important consider giving quick links a clearer CTA style
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: screenshot the header at page load and after 1 scroll on mobile.

Navigation density and mega menu scanning

Desktop Mobile
Section
Top navigation labels, More menu, mega menu lists
Pros
  • Clear category coverage and strong breadth for discovery.
  • Familiar patterns make the navigation learnable.
Cons
  • Many top-level items compete for attention and reduce the curated feel.
  • Long link lists in mega menus are visually similar, scanning becomes work.
  • Repeated labels can create perceived redundancy.
Recommended change
Increase padding and negative space around menu links for easier scanability
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture desktop nav and the full mobile nav drawer open.

Search entry point and interaction clarity

Desktop Mobile
Section
Search icon, search field, search overlay/autocomplete
Pros
  • Search is available globally and easy to find.
  • Clear field pattern is familiar.
Cons
  • If search appears as a full row, it can add height and compete with hero on mobile.
  • Autocomplete and suggestion layout can feel busy if too many suggestion types show at once.
  • Clear and close controls can be small on mobile.
Recommended change
On mobile, consider icon-first search that expands into an overlay. Ensure Desktop search pop up module allows view of full search box without need to scroll to view "See all results" CTA. Ensure close CTA is easy to see and touch 
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture search closed, open, and with suggestions visible.

PLP (UAT)

Product listing page findings covering filters, grid, quick add, promotions, and sorting.

PLP filtering density and discoverability

Desktop Mobile
Section
Left rail filters, search within results, applied filtering behaviour
Pros
  • Very comprehensive filtering allows users to narrow down highly specific needs.
  • Search within results is available and useful for large assortments.
  • Clear grouping of filter categories (color, size, length, price, occasion, fabric).
Cons
  • Filter list is very long and visually heavy, especially on desktop.
Recommended change
Increase padding around .ss__list__option on mobile as the click radius is too small.
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture filter rail on desktop and filter drawer on mobile.

Sorting and results context

Desktop Mobile
Section
Sort dropdown, result count visibility
Pros
  • Sorting options cover key user needs (newest, price, rating).
  • Default sorting provides a reasonable starting point.
Cons
  • UI error on mobile when Navigation is open
Recommended change
Address z-index issues on sorting on mobile
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture sort dropdown open state and result count placement.

PDP (UAT)

Product detail page findings covering gallery, pricing, size selection, add to cart, content, and cross sell.

PDP image gallery clarity and interaction

Desktop Mobile
Section
Product image gallery, thumbnails, zoom and swipe behaviour
Pros
  • High quality imagery clearly shows fit, fabric, and detailing.
  • Multiple angles help reduce uncertainty before purchase.
  • Thumbnail navigation is predictable and familiar.
Cons
  • Gallery size on tablet devices creates odd UI PDP layout with white space
  • On mobile, long image stacks increase scroll before reaching product details.
Recommended change
On tablet reduce gallery to 1 image rather than 2 (as per example). This breaks UI layout of PDP as some screen sizes
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture gallery layout on desktop and swipe behaviour on mobile.

Product information hierarchy and scanability

Desktop Mobile
Section
Product title, brand, price, promotions, stock messaging
Pros
  • Pricing and discount messaging are clear and prominent.
  • Percentage off has strong UI and color
  • Brand and product name are easy to identify.
  • Low stock messaging adds urgency without being aggressive.
Cons
  • Multiple price formats and payment options compete for attention.
  • Promotional badges can fragment the visual hierarchy.
  • Key reassurance details are pushed lower in the layout.
Recommended change
Reduce padding between brand name and product name and consider making price larger
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture price area with all promotional messaging visible.

Size selection confidence and support

Desktop Mobile
Section
Size selector, size guide, fit assistance
Pros
  • Size options are clearly presented and easy to tap or click.
  • Size guide and fit assistance are available inline.
  • Low stock indicator supports quicker decision making.
Cons

Recommended change
Not sure you have full control of this but check TrueFit close CTA on mobile. Seems hard to close in tests 
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture size selector with size guide link and any fit notes visible.

Add to cart visibility and commitment

Desktop Mobile
Section
Primary CTA, add to cart behaviour
Pros
  • Add to cart CTA is visually strong and easy to locate.
  • CTA language is clear and action oriented.
  • Low stock messaging reinforces urgency near the action point.
Cons

Recommended change
Anchor the primary CTA more persistently on mobile and consider subtle reinforcement messaging directly beneath it, such as free delivery or returns reassurance. 
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture ATC button area and any sticky behaviour on mobile.

Cross sell and style inspiration placement

Desktop Mobile
Section
Style it with, related products, recommendations
Pros
  • Related items feel relevant and visually cohesive.
  • Quick add supports easy basket expansion.
  • Reinforces styling inspiration.
Cons
  • Cross sell sections add significant page length.
  • Can distract users before primary purchase is complete.
  • On mobile, primary product context can be lost.
Recommended change
Ensure cross sell content appears clearly after the primary purchase decision point. Use page breaks, background change or stronger header to distinctly seperate upsell modules from the rest of the PDP
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture cross sell carousel and its position relative to ATC.

Mini Cart (UAT)

Mini cart findings covering visibility, product clarity, checkout CTA, promotions, and upsells.

Promotional messaging within mini cart

Desktop Mobile
Section
Incentives, discounts, rewards, upsell messaging
Pros
  • Incentives and discounts remain visible close to conversion.
  • Rewards and promotions reinforce perceived value.
Cons
  • Critical information but can be easily lost to the eye. Requires user to stop and read
Recommended change
Utilise visual triggers to ensure user easily identifies promotion value. In case of mini-cart utilise truck icon or similar along with promo message
Uploaded screenshot preview

Image slot: upload your UAT screenshot for this finding.

Tip: capture any promotional banners or reward messaging within mini cart.